<template>
  <div>
    <Receivables/>
    <div>
      <roll height="533px">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="108px"></el-table-column>
          <el-table-column prop="date" label="充电站"></el-table-column>
          <el-table-column prop="code" label="预付费"></el-table-column>
          <el-table-column prop="code" label="电费折扣"></el-table-column>
          <el-table-column prop="code" label="服务费"></el-table-column>
          <el-table-column prop="code" label="冻结金额"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span @click="update(scope.row)">修改</span>
            </template>
          </el-table-column>
        </el-table>
      </roll>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10,15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
      <CollectionAllocation  v-show="isShow" @close="close"/>
    </div>
  </div>
</template>
<script>
import Receivables from "./Receivables";
import roll from "@/components/Roll";
import CollectionAllocation from "./CollectionAllocation";
export default {
  components: {
    Receivables,
    roll,
    CollectionAllocation
  },
  data() {
    return {
      isShow:false,
      tableData: [
        {
          date: "2016-05-02",
          code: "1589518635483"
        },
        {
          date: "2016-05-04",
          code: "1589518635483"
        },
        {
          date: "2016-05-01",
          code: "1589518635483"
        }
      ],
      currentPage: 1, //当前第几页
      pageSize: 10
    };
  },
  methods: {
    update(e) {},
    handleSizeChange(e) {
      this.$emit("SizeChange", e);
    },
    handleCurrentChange(e) {
      this.$emit("CurrentChange", e);
    },
    update(){
      this.isShow=true
    },
    close(){
      this.isShow=false
    }
  }
};
</script>
<style scoped>
.block {
  text-align: center;
}
</style>